<template>
  <div class="index">
    <div class="header">
      <van-search
        v-model="value"
        show-action
        placeholder="搜你所想..."
        @search="onSearch"
      >
        <template #action>
          <van-icon name="comment-o" size="0.58rem" />
        </template>
      </van-search>
    </div>
    <div class="banner1">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img v-lazy="image" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="banner2">
      <van-notice-bar left-icon="volume-o" :scrollable="false">
        <van-swipe
          vertical
          class="notice-swipe"
          :autoplay="3000"
          :show-indicators="false"
        >
          <van-swipe-item>第22届校园十大歌手大赛</van-swipe-item>
          <van-swipe-item>第10届校园十大歌手大赛正式开始</van-swipe-item>
        </van-swipe>
      </van-notice-bar>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: "",
      images: [
        "https://img01.yzcdn.cn/vant/apple-1.jpg",
        "https://img01.yzcdn.cn/vant/apple-2.jpg",
      ],
    };
  },
  methods: {
    onSearch() {},
  },
};
</script>
<style lang="scss" scoped>
.index {
  .header {
    background: #5ab6ff;
    height: 1.1rem;
    line-height: 1.1rem;
    .van-search__content {
      border-radius: 0.5rem;
      color: #fff;
    }
    .van-search {
      background: rgba(0, 0, 0, 0);
      padding-top: 0.09rem;
      .van-icon {
        color: #fff;
      }
      .van-icon-search {
        color: #fff;
      }
    }
    .van-search__action {
      padding-top: 0.15rem;
    }
  }
  .banner1 {
    height: 4.78rem;
    width: 100%;
    .van-swipe {
      top: 0;
      left: 0;
      height: 100%;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
    .banner2 {
        .van-swipe-item{
            transform: translateY(0.58rem);
        }
    }
}
</style>